<template>
  <view>
    <u-navbar :background="background" title="Rococo报名表" is-fixed="true" :border-bottom="false" :is-back="false" z-index="9999"></u-navbar>
    <image src="https://typora-licodeao.oss-cn-guangzhou.aliyuncs.com/typoraImg/welcome2.png" class="img"></image>
    <view class="tip">
      <view class="remind">
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
      </view>
      <view class="content">
        <view class="first">
          <view class="num">1.</view>Hello😊 欢迎各位新同学报名洛可可工作室~
        </view>
        <view class="second">
          <view class="num">2.</view>你需要<view class="important">填写下方的信息</view>，方便提交后通过<view class="important">微信</view>
          <view class="empty">告知<view class="important">面试时间及地点</view>。</view>
        </view>
        <view class="third">
          <view class="num">3.</view>温馨提示：<view class="important">记得订阅</view>哦~
        </view>
      </view>
    </view>
    <view class="formBoxes">
      <view class="remind">
        <view class="i"></view>
        <view class="i"></view>
        <view class="i"></view>
      </view>
      <view class="formContent">
        <view class="name">
          <uni-forms :modelValue="ruleForm">
            <uni-forms-item required="true" label="姓名" name="name">
              <uni-easyinput prefixIcon="person" placeholder="请输入真实姓名" type="text" @change="getName"></uni-easyinput>
            </uni-forms-item>
            <uni-forms-item required="true" label="性别" name="gender">
              <uni-data-select placeholder="请选择性别" v-model="genderValue" :localdata="genderRange" @change="getGender"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item required="true" label="年级" name="year">
              <uni-data-select placeholder="请选择年级" v-model="yearValue" :localdata="yearRange" @change="getYear"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item required="true" label="专业" name="subject">
              <uni-easyinput prefixIcon="auth" placeholder="请输入专业名称" @change="getSubject"></uni-easyinput>
            </uni-forms-item>
            <uni-forms-item required="true" label="爱好" name="hobby">
              <uni-easyinput prefixIcon="color" placeholder="请输入爱好" @change="getHobby"></uni-easyinput>
            </uni-forms-item>
            <uni-forms-item required="true" label="电话" name="phone">
              <uni-easyinput prefixIcon="phone" placeholder="请输入电话号码" @change="getPhone"></uni-easyinput>
            </uni-forms-item>
            <uni-forms-item required="true" label="小组" name="team">
              <uni-data-select placeholder="请选择意向小组" v-model="teamValue" :localdata="teamRange" @change="getTeam"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item required="true" label="介绍" name="introduction">
              <uni-easyinput type="textarea" placeholder="请填写自我介绍" @change="getIntroduction"></uni-easyinput>
            </uni-forms-item>
          </uni-forms>
          <u-button type="primary" size="medium" class="submitBtn" @click="submit">提交</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        background: {
          backgroundColor: '#FFFFFF'
        },
        applicationFrom: {
          adopt: 0,
          openId: "",
          userName: "",
          userGender: "",
          userYear: "",
          userSubject: "",
          userHobby: "",
          userPhone: "",
          userTeam: "",
          userIntroduction: ""
        },
        ruleForm: {
          userName: "",
          userGender: "",
          userYear: "",
          userSubject: "",
          userHobby: "",
          userPhone: "",
          userTeam: "",
          userIntroduction: ""
        },
        genderValue: 0,
        yearValue: 0,
        teamValue: 0,
        genderRange: [
          {
            value: 1,
            text: '男'
          },
          {
            value: 2,
            text: '女'
          }
        ],
        yearRange: [
          {
            value: 1,
            text: '2021'
          },
          {
            value: 2,
            text: '2022'
          }
        ],
        teamRange: [
          {
            value: 1,
            text: '运营组'
          },
          {
            value: 2,
            text: '设计组'
          },
          {
            value: 3,
            text: '技术组'
          }
        ],
        isFlag: false
      }
    },
    methods: {
      getName(e) {
        console.log(e)
        this.applicationFrom.userName = e
      },
      getGender(e) {
        let forMatGender = this.genderRange.find(item => item.value === e)
        this.applicationFrom.userGender = forMatGender.text
      },
      getYear(e) {
        let forMatYear = this.yearRange.find(item => item.value === e)
        this.applicationFrom.userYear = forMatYear.text
      },
      getSubject(e) {
        this.applicationFrom.userSubject = e
      },
      getHobby(e) {
        this.applicationFrom.userHobby = e
      },
      getPhone(e) {
        this.applicationFrom.userPhone = e
      },
      getTeam(e) {
        let forMatTeam = this.teamRange.find(item => item.value === e)
        this.applicationFrom.userTeam = forMatTeam.text
      },
      getIntroduction(e) {
        this.applicationFrom.userIntroduction = e
      },
      submit() {
        let that = this
        let keyArr = Object.keys(that.applicationFrom)
        for (let item of keyArr) {
          if (that.applicationFrom[item] !== "") {
            that.isFlag = true
          } else {
            that.isFlag = false
          }
        }
        if (that.isFlag) {
          wx.requestSubscribeMessage({
            tmplIds: ['GoUZsUf4kC-VuHVU9LmOsOMUc4fYbYNSDM_Gk4kcyA8'],
            success(res) {
              uni.request({
                url: 'https://www.lingche.net.cn:9223/applicationFrom/add/addFrom',
                method: 'POST',
                data: that.applicationFrom,
                success(res) {
                  console.log(res)
                  if (res.data.code === 200) {
                    uni.showToast({
                      icon: 'success',
                      title: '提交成功',
                      duration: 2000
                    })
                  }
                  if (res.data.code === 500) {
                    uni.showToast({
                      icon: 'error',
                      title: '请勿重复提交',
                      duration: 2000
                    })
                  }
                }
              })
            }
          })
        } else {
          uni.showToast({
            icon: 'error',
            title: '请填写信息',
            duration: 1500
          })
        }
      }
    },
    onLoad(option) {
      let getOpenId = JSON.parse(decodeURIComponent(option.item)) 
      this.applicationFrom.openId = getOpenId.openId
    }
  }
</script>

<style>
  page {
    height: 1100px;
    background-color: #FFFFFF;
  }
  
  .img {
    width: 100%;
  }
  
  .tip {
    width: 90%;
    height: 100px;
    margin: 10px auto;
    border-radius: 10px;
    background-image: linear-gradient(to bottom, #E2EDFD 0%, white 100%);
  }
  
  .remind {
    width: 90%;
    height: 15px;
    margin: 0 auto;
    padding-top: 6px;
  }
  
  .i {
    display: inline-block;
    width: 5px;
    height: 5px;
    line-height: 5px;
    background-color: #FF6C85;
    border-radius: 50%;
    margin: 2px;
    float: left;
  }
  
  .content {
    width: 95%;
    margin: 5px auto;
  }
  
  .first,
  .second,
  .third {
    text-indent: 1rem;
  }
  
  .empty {
    margin-left: 17px;
  }
  
  .num {
    display: inline;
    margin-right: 5px;
    font-weight: bolder;
    color: #F48D87;
  }
  
  .important {
    display: inline;
    color: #F48D87;
  }
  
  .formBoxes {
    width: 90%;
    height: 610px;
    margin: 10px auto;
    border-radius: 10px;
    background-color: #E2EDFD; background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%); background-blend-mode: screen, overlay;
  }
    .formContent {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }
    
    .name {
      width: 90%;
      height: 30px;
      line-height: 30px;
      margin: 10px auto;
    }
    
    .submitBtn {
      float: right;
    }
</style>
